<template>
    <div class="list-wrap">
      <ul class="clearfix">
        <li v-for="(item,index) in allList">
          <div class="item-left">
            <img :src="item.cover" alt="">
          </div>
          <div class="item-right">
            <p class="title">{{item.name}}</p>
            <p class="description">{{item.intro}}</p>
            <div class="btn-wrap">
              <button :class="{'like': !item.checked}" @click="like(item, index)">{{item.checked ? '退订' : '订阅'}}</button>
              <p>{{item.count}}人已经订阅</p>
            </div>
          </div>
        </li>
      </ul>
        <div class="load-more-wrap flex">
          <template v-if="allPage.more">
            <img src="../../assets/svg/load-mord.svg" alt="" v-if="allPage.loadStatus">
            <button v-else @click="loadMore">加载更多</button>
          </template>
          <template v-else>
            <span>暂无更多数据</span>
          </template>
        </div>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'all',
    computed: {
      ...mapState('topic', [
        'allList', 'allPage'
      ])
    },
    methods: {
      like (data, index) {
        this.$emit('turn')
        let parameter = {
          id: data.id,
          index: index,
          type: 'all',
          checked: data.checked
        }
        this.$store.dispatch('topic/subscribe', parameter)
      },
      loadMore () {
        this.$store.dispatch('topic/getAll')
      }
    }
  }
</script>
